export default {
    data() {
        return {
            //原图
            imgBox: {
                width: 0,
                height: 0,

                // 偏移量
                moveLeft: 0,
                moveTop: 0,

                // 收缩
                scale: 1,

                // 旋转
                rotate: 0,

                //最初的宽度
                initWidth: 0,
                //最初的高度
                initHeight: 0
            },
            //外框
            outerBox: {
                width: 0,
                height: 0,
            },
            //切块
            cutBox: {
                width: 0,
                height: 0,
                // 偏移量
                moveLeft: 0,
                moveTop: 0,

                // 宽高比
                scale: 0,
            }
        }
    },
    methods: {
        // 图片变更的时候，更改值
        changeImage(v) {
            const imgDom = document.createElement("img")
            imgDom.src = v
            imgDom.onload = ()=> {

                // 宽高比例
                const widthHeightScale = imgDom.width/imgDom.height

                const doWidth = ()=> {
                    if( this.outerBox.width <= imgDom.width) {
                        this.imgBox.width = this.outerBox.width
                    }else {
                        this.imgBox.width = imgDom.width
                    }
                    this.imgBox.height =  this.imgBox.width / widthHeightScale
                }

                const doHeight = ()=> {
                    if( this.outerBox.height <= imgDom.height) {
                        this.imgBox.height = this.outerBox.height
                    }else {
                        this.imgBox.height = imgDom.height
                    }
                    this.imgBox.width =  this.imgBox.height *  widthHeightScale
                }

                //计算图片在这个框中的自适应高宽


                // 宽框 正方框
                if(this.outerBox.width >= this.outerBox.height) {
                    if(imgDom.width > imgDom.height) {
                        doWidth()
                    }else {
                        doHeight()
                    }
                }
                // 长框
                else {
                    if(imgDom.width >= imgDom.height) {
                        doWidth()
                    }else {
                        doHeight()
                    }
                }


                this.imgBox.initWidth = this.imgBox.width

                this.imgBox.initHeight = this.imgBox.height

                //偏移量设置 让图居中显示
                this.imgBox.moveLeft = (this.outerBox.width - this.imgBox.width ) / 2

                this.imgBox.moveTop = (this.outerBox.height - this.imgBox.height ) / 2

                this.generateImg()
            }
        },
        // 获得外框的信息
        getOuterBoxInfo() {
            const bigDom = this.$refs.myCropper

            //offsetWidth 不能得到小数点后数字
            this.outerBox.width = parseFloat(window.getComputedStyle(bigDom).width)
            this.outerBox.height =  parseFloat(window.getComputedStyle(bigDom).height)


            this.getCutBoxInfo()
        },
        // 获得切块的信息  该信息通过外框来设置
        getCutBoxInfo() {
            if(!this.defaultCutWidth) {
                this.cutBox.width = this.outerBox.width / 4
            }else {
                this.cutBox.width = this.defaultCutWidth
            }

            // 没有默认高度的时候
            if(!this.defaultCutHeight) {
                this.cutBox.height = this.outerBox.height / 4
            }else {
                this.cutBox.height = this.defaultCutHeight
            }

            //偏移量设置 让图居中显示
            this.cutBox.moveLeft = (this.outerBox.width - this.cutBox.width) / 2

            this.cutBox.moveTop = (this.outerBox.height - this.cutBox.height) / 2


            // 计算比例
            this.cutBox.scale = this.cutBox.width / this.cutBox.height
        },
    }
}